<template>
  <div class="intelligent-nav-system">
    <!-- 主导航容器 -->
    <div class="nav-container" :class="{ 'nav-expanded': isExpanded }">
      
      <!-- 顶部搜索栏 -->
      <div class="nav-header">
        <div class="search-section">
          <el-input
            v-model="searchQuery"
            placeholder="智能搜索功能、数据、操作..."
            class="smart-search"
            @input="handleSmartSearch"
            @focus="showSearchResults = true"
            @blur="hideSearchResults"
          >
            <template #prefix>
              <el-icon class="search-icon">
                <Search />
              </el-icon>
            </template>
            <template #suffix>
              <el-button 
                v-if="searchQuery" 
                text 
                @click="clearSearch"
                class="clear-btn"
              >
                <el-icon><Close /></el-icon>
              </el-button>
              <el-button 
                v-else 
                text 
                @click="toggleVoiceSearch"
                class="voice-btn"
                :class="{ 'voice-active': isVoiceSearching }"
              >
                <el-icon><Microphone /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
        
        <!-- 智能搜索下拉结果 -->
        <transition name="search-dropdown">
          <div v-if="showSearchResults && (searchResults.length > 0 || searchQuery)" class="search-results">
            <div class="search-header">
              <span class="result-count">{{ searchResults.length }} 个结果</span>
              <el-button text size="small" @click="showAllResults">
                查看全部
              </el-button>
            </div>
            <div class="result-list">
              <div
                v-for="(result, index) in searchResults.slice(0, 8)"
                :key="result.id"
                class="result-item"
                :class="{ 'highlighted': index === selectedResultIndex }"
                @click="navigateToResult(result)"
                @mouseenter="selectedResultIndex = index"
              >
                <div class="result-icon" :style="{ background: result.color }">
                  <el-icon><component :is="result.icon" /></el-icon>
                </div>
                <div class="result-content">
                  <div class="result-title" v-html="highlightText(result.title)"></div>
                  <div class="result-desc">{{ result.description }}</div>
                  <div class="result-meta">
                    <el-tag size="small" :type="result.categoryType">{{ result.category }}</el-tag>
                    <span class="result-path">{{ result.path }}</span>
                  </div>
                </div>
                <div class="result-action">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <!-- 智能导航主体 -->
      <div class="nav-body">
        <!-- 工作台快捷入口 -->
        <div class="workspace-section">
          <div class="section-title">
            <el-icon><Monitor /></el-icon>
            工作台
          </div>
          <div class="workspace-grid">
            <div
              v-for="item in workspaceItems"
              :key="item.id"
              class="workspace-item"
              @click="navigateTo(item.path)"
            >
              <div class="item-icon" :style="{ background: item.gradient }">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
              <div class="item-info">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-desc">{{ item.description }}</div>
              </div>
              <div class="item-badge" v-if="item.badge">
                <el-tag size="small" :type="item.badgeType">{{ item.badge }}</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 智能分类导航 -->
        <div class="category-section">
          <div class="section-title">
            <el-icon><Grid /></el-icon>
            功能分类
            <el-button text size="small" @click="toggleCategoryView">
              {{ categoryViewMode === 'grid' ? '列表' : '网格' }}
            </el-button>
          </div>
          
          <!-- 分类标签 -->
          <div class="category-tabs">
            <div
              v-for="category in categories"
              :key="category.id"
              class="category-tab"
              :class="{ active: selectedCategory === category.id }"
              @click="selectCategory(category.id)"
            >
              <el-icon><component :is="category.icon" /></el-icon>
              <span>{{ category.name }}</span>
              <el-badge v-if="category.count > 0" :value="category.count" class="category-badge" />
            </div>
          </div>

          <!-- 功能列表 -->
          <div class="functions-container" :class="categoryViewMode">
            <div
              v-for="func in filteredFunctions"
              :key="func.id"
              class="function-item"
              @click="navigateTo(func.path)"
            >
              <div class="function-icon" :style="{ background: func.color }">
                <el-icon><component :is="func.icon" /></el-icon>
              </div>
              <div class="function-info">
                <div class="function-title">{{ func.title }}</div>
                <div class="function-desc">{{ func.description }}</div>
                <div class="function-meta">
                  <el-tag size="small" v-if="func.badge" :type="func.badgeType">{{ func.badge }}</el-tag>
                  <span class="function-path">{{ func.path }}</span>
                </div>
              </div>
              <div class="function-action">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 最近使用 -->
        <div class="recent-section" v-if="recentItems.length > 0">
          <div class="section-title">
            <el-icon><Clock /></el-icon>
            最近使用
            <el-button text size="small" @click="clearRecent">
              <el-icon><Delete /></el-icon>
              清空
            </el-button>
          </div>
          <div class="recent-list">
            <div
              v-for="item in recentItems"
              :key="item.id"
              class="recent-item"
              @click="navigateTo(item.path)"
            >
              <div class="recent-icon" :style="{ background: item.color }">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
              <div class="recent-info">
                <div class="recent-title">{{ item.title }}</div>
                <div class="recent-time">{{ item.lastUsed }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- AI助手建议 -->
        <div class="ai-suggestions" v-if="aiSuggestions.length > 0">
          <div class="section-title">
            <el-icon><MagicStick /></el-icon>
            AI智能推荐
            <el-button text size="small" @click="refreshSuggestions">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
          <div class="suggestions-list">
            <div
              v-for="suggestion in aiSuggestions"
              :key="suggestion.id"
              class="suggestion-item"
              @click="navigateTo(suggestion.path)"
            >
              <div class="suggestion-icon" :style="{ background: suggestion.color }">
                <el-icon><component :is="suggestion.icon" /></el-icon>
              </div>
              <div class="suggestion-content">
                <div class="suggestion-title">{{ suggestion.title }}</div>
                <div class="suggestion-reason">{{ suggestion.reason }}</div>
              </div>
              <div class="suggestion-confidence">
                <el-progress 
                  :percentage="suggestion.confidence" 
                  :show-text="false" 
                  :stroke-width="4"
                />
                <span class="confidence-text">{{ suggestion.confidence }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作栏 -->
      <div class="nav-footer">
        <div class="footer-actions">
          <el-button text @click="toggleNavMode">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
          <el-button text @click="toggleFullscreen">
            <el-icon><FullScreen /></el-icon>
            全屏
          </el-button>
          <el-button text @click="showHelp">
            <el-icon><QuestionFilled /></el-icon>
            帮助
          </el-button>
        </div>
        <div class="user-info">
          <el-avatar :size="24" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <span class="user-name">管理员</span>
        </div>
      </div>
    </div>

    <!-- 语音搜索覆盖层 -->
    <transition name="voice-overlay">
      <div v-if="isVoiceSearching" class="voice-search-overlay">
        <div class="voice-search-panel">
          <div class="voice-animation">
            <div class="voice-circle voice-circle-1"></div>
            <div class="voice-circle voice-circle-2"></div>
            <div class="voice-circle voice-circle-3"></div>
            <div class="voice-center">
              <el-icon><Microphone /></el-icon>
            </div>
          </div>
          <div class="voice-status">
            <div class="status-text">{{ voiceStatus }}</div>
            <div class="status-hint">请说出您要查找的功能</div>
          </div>
          <div class="voice-actions">
            <el-button type="danger" @click="stopVoiceSearch">
              <el-icon><Close /></el-icon>
              停止
            </el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Search, Close, Microphone, Monitor, Grid, Clock, Delete, MagicStick, Refresh,
  Setting, FullScreen, QuestionFilled, ArrowRight
} from '@element-plus/icons-vue'
import { menuData } from '@/config/menu'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const isExpanded = ref(true)
const searchQuery = ref('')
const showSearchResults = ref(false)
const selectedResultIndex = ref(0)
const categoryViewMode = ref('grid') // 'grid' | 'list'
const selectedCategory = ref('all')
const isVoiceSearching = ref(false)
const voiceStatus = ref('正在聆听...')

// 搜索相关
const searchResults = ref([])
const searchTimeout = ref(null)

// 工作台项目
const workspaceItems = ref([
  {
    id: 1,
    title: '数据概览',
    description: '实时业务数据',
    icon: 'DataBoard',
    path: '/dashboard',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    badge: 'HOT',
    badgeType: 'danger'
  },
  {
    id: 2,
    title: '销售订单',
    description: '订单管理',
    icon: 'Document',
    path: '/sales/orders',
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    badge: 'NEW',
    badgeType: 'success'
  },
  {
    id: 3,
    title: '库存管理',
    description: '库存查询',
    icon: 'Box',
    path: '/inventory/stock',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    badge: '',
    badgeType: ''
  },
  {
    id: 4,
    title: '财务报表',
    description: '财务分析',
    icon: 'Money',
    path: '/finance/accounts',
    gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    badge: '',
    badgeType: ''
  }
])

// 分类数据
const categories = ref([
  { id: 'all', name: '全部', icon: 'Grid', count: 0 },
  { id: 'sales', name: '销售', icon: 'ShoppingCart', count: 0 },
  { id: 'purchase', name: '采购', icon: 'ShoppingBag', count: 0 },
  { id: 'inventory', name: '库存', icon: 'Box', count: 0 },
  { id: 'finance', name: '财务', icon: 'Money', count: 0 },
  { id: 'member', name: '会员', icon: 'UserFilled', count: 0 },
  { id: 'reports', name: '报表', icon: 'DataAnalysis', count: 0 },
  { id: 'system', name: '系统', icon: 'Setting', count: 0 }
])

// 功能数据
const allFunctions = ref([])
const recentItems = ref([])
const aiSuggestions = ref([])

// 计算属性
const filteredFunctions = computed(() => {
  if (selectedCategory.value === 'all') {
    return allFunctions.value
  }
  return allFunctions.value.filter(func => func.category === selectedCategory.value)
})

// 方法
const handleSmartSearch = () => {
  if (searchTimeout.value) {
    clearTimeout(searchTimeout.value)
  }
  
  searchTimeout.value = setTimeout(() => {
    if (searchQuery.value.trim()) {
      performSearch(searchQuery.value)
    } else {
      searchResults.value = []
    }
  }, 300)
}

const performSearch = (query) => {
  const keyword = query.toLowerCase()
  const results = []
  
  // 搜索所有功能
  allFunctions.value.forEach(func => {
    const score = calculateRelevanceScore(func, keyword)
    if (score > 0) {
      results.push({
        ...func,
        score,
        categoryType: getCategoryType(func.category)
      })
    }
  })
  
  // 按相关性排序
  searchResults.value = results
    .sort((a, b) => b.score - a.score)
    .slice(0, 10)
}

const calculateRelevanceScore = (func, keyword) => {
  let score = 0
  
  // 标题完全匹配
  if (func.title.toLowerCase().includes(keyword)) {
    score += 10
  }
  
  // 描述匹配
  if (func.description && func.description.toLowerCase().includes(keyword)) {
    score += 5
  }
  
  // 路径匹配
  if (func.path.toLowerCase().includes(keyword)) {
    score += 3
  }
  
  // 分类匹配
  if (func.category.toLowerCase().includes(keyword)) {
    score += 2
  }
  
  return score
}

const getCategoryType = (category) => {
  const typeMap = {
    'sales': 'success',
    'purchase': 'warning',
    'inventory': 'danger',
    'finance': 'primary',
    'member': 'info',
    'reports': 'success',
    'system': 'info'
  }
  return typeMap[category] || 'info'
}

const highlightText = (text) => {
  if (!searchQuery.value) return text
  const regex = new RegExp(`(${searchQuery.value})`, 'gi')
  return text.replace(regex, '<span class="highlight">$1</span>')
}

const navigateToResult = (result) => {
  router.push(result.path)
  addToRecent(result)
  showSearchResults.value = false
  searchQuery.value = ''
}

const navigateTo = (path) => {
  router.push(path)
  // 添加到最近使用
  const func = allFunctions.value.find(f => f.path === path)
  if (func) {
    addToRecent(func)
  }
}

const addToRecent = (item) => {
  const existing = recentItems.value.find(r => r.id === item.id)
  if (existing) {
    existing.lastUsed = '刚刚'
    return
  }
  
  recentItems.value.unshift({
    ...item,
    lastUsed: '刚刚'
  })
  
  if (recentItems.value.length > 5) {
    recentItems.value.pop()
  }
  
  // 保存到本地存储
  localStorage.setItem('recent-navigation', JSON.stringify(recentItems.value))
}

const clearRecent = () => {
  recentItems.value = []
  localStorage.removeItem('recent-navigation')
  ElMessage.success('已清空最近使用')
}

const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
}

const toggleCategoryView = () => {
  categoryViewMode.value = categoryViewMode.value === 'grid' ? 'list' : 'grid'
}

const toggleVoiceSearch = () => {
  if (isVoiceSearching.value) {
    stopVoiceSearch()
  } else {
    startVoiceSearch()
  }
}

const startVoiceSearch = () => {
  isVoiceSearching.value = true
  voiceStatus.value = '正在聆听...'
  
  // 模拟语音识别
  setTimeout(() => {
    voiceStatus.value = '识别中...'
    setTimeout(() => {
      searchQuery.value = '销售订单'
      performSearch('销售订单')
      stopVoiceSearch()
    }, 2000)
  }, 1000)
}

const stopVoiceSearch = () => {
  isVoiceSearching.value = false
  voiceStatus.value = '正在聆听...'
}

const clearSearch = () => {
  searchQuery.value = ''
  searchResults.value = []
  showSearchResults.value = false
}

const hideSearchResults = () => {
  setTimeout(() => {
    showSearchResults.value = false
  }, 200)
}

const showAllResults = () => {
  // 显示所有搜索结果
  showSearchResults.value = false
  ElMessage.info('显示所有搜索结果')
}

const refreshSuggestions = () => {
  // 模拟AI推荐刷新
  aiSuggestions.value = [
    {
      id: 1,
      title: '库存预警',
      description: '当前库存不足的商品',
      icon: 'Warning',
      path: '/inventory/alerts',
      color: '#f56c6c',
      reason: '基于您的库存数据，建议检查库存预警',
      confidence: 85
    },
    {
      id: 2,
      title: '销售报表',
      description: '本月销售数据分析',
      icon: 'TrendCharts',
      path: '/reports/sales',
      color: '#67c23a',
      reason: '您经常查看销售数据，建议查看最新报表',
      confidence: 92
    }
  ]
}

const toggleNavMode = () => {
  ElMessage.info('打开导航设置')
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

const showHelp = () => {
  ElMessage.info('打开帮助文档')
}

// 初始化功能数据
const initializeFunctions = () => {
  const functions = []
  
  // 从菜单数据构建功能列表
  const processMenu = (menus, parentCategory = '') => {
    menus.forEach(menu => {
      if (menu.path && menu.children && menu.children.length > 0) {
        // 有子菜单的作为分类
        const category = menu.title.toLowerCase().replace('管理', '').replace('中心', '')
        processMenu(menu.children, category)
      } else if (menu.path) {
        // 叶子节点作为功能
        functions.push({
          id: functions.length + 1,
          title: menu.title,
          description: menu.description || `访问${menu.title}功能`,
          icon: menu.icon || 'Document',
          path: menu.path,
          category: parentCategory || 'system',
          color: getCategoryColor(parentCategory || 'system'),
          badge: menu.badge || '',
          badgeType: getBadgeType(menu.badge)
        })
      }
    })
  }
  
  processMenu(menuData)
  allFunctions.value = functions
  
  // 更新分类计数
  categories.value.forEach(category => {
    if (category.id !== 'all') {
      category.count = functions.filter(f => f.category === category.id).length
    } else {
      category.count = functions.length
    }
  })
}

const getCategoryColor = (category) => {
  const colorMap = {
    'sales': '#67c23a',
    'purchase': '#e6a23c',
    'inventory': '#f56c6c',
    'finance': '#409eff',
    'member': '#909399',
    'reports': '#67c23a',
    'system': '#606266'
  }
  return colorMap[category] || '#409eff'
}

const getBadgeType = (badge) => {
  const typeMap = {
    'NEW': 'success',
    'HOT': 'danger',
    'AI': 'warning'
  }
  return typeMap[badge] || 'info'
}

// 生命周期
onMounted(() => {
  initializeFunctions()
  
  // 加载最近使用
  const saved = localStorage.getItem('recent-navigation')
  if (saved) {
    try {
      recentItems.value = JSON.parse(saved)
    } catch (error) {
      console.error('Failed to load recent navigation:', error)
    }
  }
  
  // 初始化AI建议
  refreshSuggestions()
})

// 键盘导航
const handleKeydown = (e) => {
  if (showSearchResults.value && searchResults.value.length > 0) {
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      selectedResultIndex.value = Math.min(selectedResultIndex.value + 1, searchResults.value.length - 1)
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      selectedResultIndex.value = Math.max(selectedResultIndex.value - 1, 0)
    } else if (e.key === 'Enter') {
      e.preventDefault()
      if (searchResults.value[selectedResultIndex.value]) {
        navigateToResult(searchResults.value[selectedResultIndex.value])
      }
    } else if (e.key === 'Escape') {
      showSearchResults.value = false
    }
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.intelligent-nav-system {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
}

.nav-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.nav-header {
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

.search-section {
  position: relative;
}

.smart-search {
  width: 100%;
}

.smart-search :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.smart-search :deep(.el-input__wrapper:hover) {
  border-color: #409eff;
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.2);
}

.smart-search :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.3);
}

.search-icon {
  color: #909399;
  font-size: 18px;
}

.clear-btn, .voice-btn {
  color: #909399;
  transition: all 0.3s ease;
}

.voice-btn.voice-active {
  color: #f56c6c;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 1000;
  max-height: 400px;
  overflow: hidden;
}

.search-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}

.result-count {
  font-size: 12px;
  color: #909399;
}

.result-list {
  max-height: 320px;
  overflow-y: auto;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f5f5f5;
}

.result-item:hover,
.result-item.highlighted {
  background: #f5f7fa;
}

.result-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.result-title :deep(.highlight) {
  background: #ffd60a;
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
}

.result-desc {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-path {
  font-size: 11px;
  color: #c0c4cc;
  font-family: monospace;
}

.result-action {
  color: #c0c4cc;
  margin-left: 8px;
}

.nav-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-title .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.workspace-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.workspace-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--item-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.workspace-item:hover::before {
  opacity: 1;
}

.workspace-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.item-desc {
  font-size: 12px;
  color: #909399;
}

.item-badge {
  margin-left: 8px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  position: relative;
}

.category-tab:hover {
  background: #f5f7fa;
  border-color: #409eff;
}

.category-tab.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.category-badge {
  margin-left: 4px;
}

.functions-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.functions-container.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.function-item:hover {
  background: #f5f7fa;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.function-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
}

.function-info {
  flex: 1;
  min-width: 0;
}

.function-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.function-desc {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.function-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.function-path {
  font-size: 11px;
  color: #c0c4cc;
  font-family: monospace;
}

.function-action {
  color: #c0c4cc;
  margin-left: 8px;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.recent-item:hover {
  background: #f5f7fa;
}

.recent-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 8px;
  flex-shrink: 0;
}

.recent-info {
  flex: 1;
  min-width: 0;
}

.recent-title {
  font-size: 13px;
  color: #303133;
  margin-bottom: 2px;
}

.recent-time {
  font-size: 11px;
  color: #909399;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.suggestion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.suggestion-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
}

.suggestion-content {
  flex: 1;
  min-width: 0;
}

.suggestion-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.suggestion-reason {
  font-size: 12px;
  opacity: 0.8;
}

.suggestion-confidence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  min-width: 60px;
}

.confidence-text {
  font-size: 11px;
  opacity: 0.8;
}

.nav-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}

.footer-actions {
  display: flex;
  gap: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-size: 13px;
  color: #606266;
}

/* 语音搜索覆盖层 */
.voice-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.voice-search-panel {
  text-align: center;
  color: white;
  max-width: 400px;
  padding: 40px;
}

.voice-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 32px;
}

.voice-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  animation: voice-pulse 2s ease-in-out infinite;
}

.voice-circle-1 {
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.voice-circle-2 {
  width: 150px;
  height: 150px;
  top: 25px;
  left: 25px;
  animation-delay: 0.5s;
}

.voice-circle-3 {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  animation-delay: 1s;
}

.voice-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

@keyframes voice-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.voice-status {
  margin-bottom: 24px;
}

.status-text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}

.status-hint {
  font-size: 14px;
  opacity: 0.8;
}

/* 动画 */
.search-dropdown-enter-active,
.search-dropdown-leave-active {
  transition: all 0.3s ease;
}

.search-dropdown-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.search-dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.voice-overlay-enter-active,
.voice-overlay-leave-active {
  transition: all 0.4s ease;
}

.voice-overlay-enter-from {
  opacity: 0;
}

.voice-overlay-leave-to {
  opacity: 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
  
  .functions-container.grid {
    grid-template-columns: 1fr;
  }
  
  .category-tabs {
    flex-wrap: wrap;
  }
}

/* 暗黑模式 */
.dark .nav-container {
  background: rgba(31, 31, 31, 0.95);
  color: #e4e7ed;
}

.dark .search-results {
  background: #1f1f1f;
  border-color: #3a3a3a;
}

.dark .workspace-item,
.dark .function-item,
.dark .recent-item {
  background: #2a2a2a;
  border-color: #3a3a3a;
}

.dark .workspace-item:hover,
.dark .function-item:hover,
.dark .recent-item:hover {
  background: #3a3a3a;
}

.dark .nav-footer {
  background: #1f1f1f;
  border-top-color: #3a3a3a;
}
</style>
